<template>
  <el-dialog :visible.sync="dialogVisible" title="任务编辑" :close-on-click-modal="false" @close="dialogVisible=false">
    <el-form ref="forbidForm" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="任务名" prop="fieldName">
        <el-input
          v-model="formData.jobName"
          placeholder="输入任务名"
        ></el-input>
      </el-form-item>
      <el-form-item label="筛选器" prop="groupers">
        <el-checkbox-group v-model="formData.groupers">
          <el-checkbox label="app_channel">渠道</el-checkbox>
          <el-checkbox label="gender">性别</el-checkbox>
          <el-checkbox label="app_version">版本</el-checkbox>
          <el-checkbox label="app_name">包名</el-checkbox>
          <el-checkbox label="tags">标签</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="显示字段" prop="displayField">
        <span v-for="(item, i) in formData.displayFields" :key="i">
          <span>{{ item | atomFieldDisplay }}</span>
          <el-button
            type="text"
            size="mini"
            @click="deleteDisplayField(item)"
          >删除</el-button>
          <br>
        </span>
        <span>
          <el-select v-model="tempDisplayField" placeholder="选择基础字段" filterable>
            <el-option v-for="(item, i) in displayFields" :key="i" :label="item.desc" :value="item.fieldName"></el-option>
          </el-select>
          <el-button
            type="text"
            size="mini"
            @click="addDisplayField"
          >添加</el-button>
        </span>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import {
  displayFieldList
} from '@/api/bx'

export default {
  name: 'JobEditor',
  filters: {
    atomFieldDisplay(item) {
      return item.desc || item.fieldName
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formData: this.value,
      rules: {
        jobName: [{ required: true, message: '不能为空' }]
      },
      // atomFields: [],
      displayFields: [],
      // tempAtomField: null,
      tempDisplayField: null,
      // atomFieldMap: {},
      displayFieldMap: {}
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.formData = this.value
      }
    }
  },
  created() {
    // this.getAtomFields()
    this.getDisplayFields()
  },
  methods: {
    // getAtomFields() {
    //   atomFieldList().then(resp => {
    //     this.atomFields = resp.data.list
    //     const map = {}
    //     this.atomFields.forEach(item => {
    //       map[item.fieldName] = item
    //     })
    //     this.atomFieldMap = map
    //   })
    // },
    getDisplayFields() {
      displayFieldList().then(resp => {
        this.displayFields = resp.data.list
        const map = {}
        this.displayFields.forEach(item => {
          map[item.fieldName] = item
        })
        this.displayFieldMap = map
      })
    },

    deleteDisplayField(display) {
      this.formData.displayFields.forEach((item, index, object) => {
        if (item === display) {
          object.splice(index, 1)
        }
      })
    },

    addDisplayField() {
      if (!this.tempDisplayField) {
        this.$message.error('先选择一个基础字段')
        return
      }
      const display = this.displayFieldMap[this.tempDisplayField]
      if (display) {
        const find = this.formData.displayFields.find(item => {
          return item.id === display.id
        })
        if (!find) {
          this.formData.displayFields.push(display)
        }
      }
      this.tempDisplayField = null
    },

    onOK() {
      this.$refs.forbidForm.validate(valid => {
        if (valid) {
          console.log(this.formData)
          this.$emit('success', this.formData)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
